<template>
  <Child>
    <template #header="{ data, flag }">
      <h1>head</h1>
      <p>{{ data }} {{ flag }}</p>
    </template>
    <template #default>
      <h1>main</h1>
    </template>
    <template #footer>
      <h1>foot</h1>
    </template>
  </Child>
</template>
<script setup lang="ts">
import Child from './Child.vue'

// 插槽：实现父组件向组件间传递 HTML 模板并在子组件中显示
// 在父组件中的 template 标签内的内容会覆盖掉子组件中的 slot 标签
// 匿名插槽：
// <slot></slot>  <template #default></template>
// 具名插槽
// <slot name="val"></slot>  <template #val></template>
// 作用域插槽：子组件向父组件传递仅能在模板中使用的数据
// 子组件在 slot 标签中自定义属性传值
// 父组件 templat 标签的 # 属性以解构形式接受
// <slot name="val" :prop="data"></slot>  <template #val="{ data }">{{ data }}</template>
// 动态插槽
// #[var] var 为响应式数据字符串，可以切换向哪一个插槽传递 html 模板
// <template #[var]="{ data }">{{ data }}</template>
</script>
<style scoped></style>
